<extend name="Common/base"/>

<block name="body">
    <style>
        body{
            background-color: #f1f1f1;
        }
        .up-input{
            /*display: none;*/
            width: 75px !important;
            height: 75px !important;
            margin-right: 5px;
            margin-bottom: 5px;
            background-image: url(/Home/wechat_1/images/addphoto.png);
            background-size: cover;
            float: left;
        }
        #up-btn{
            display: none;
        }
        .cont{
            position: relative;
            padding-left: 40px;
        }
        .cont>i{
            position: absolute;
            left: 10px;
            height: 100%;
            color: red;
        }
        .cont textarea{
            width: 92%;
            border: none;
            resize: none;
            color: #333;
            line-height: 1.3em;
            height: 60px;
            font-size: 15px;
            outline:none;
            border: 1px solid #eee;
        }
        .cont input[type='file']{
            width: 73px;
            height:73px;
        }
        .cont input,.cont select{
            height: 35px;
            width: 70%;
            margin-left:6px;
            font-size: 15px;
            color: #333;
            border: none;
            outline:none;
            border: 1px solid #eee;
        }
        .group{
            display: flex;
            align-items: center;
        }
        .cont label.tag1{
            margin-left: 6px;
            font-size: 14px;
            color: #333;
            flex-shrink: 0;
        }
        .cont label.tag2{
            display: block;
            margin-top: 20px;
            color: #808080;
            font-size: 14px;
        }
        .img-container{
            display: flex;
            flex-wrap: wrap;
        }
        .up-img{
            width: 75px;
            height: 75px;
            margin-right:5px;
            margin-bottom:5px;
        }
        .addimg{
            width: 75px !important;
            height: 75px !important;
            margin-right: 5px;
            margin-bottom: 5px;
            background-image: url('__IMG__/addphoto.png');
            background-size: cover;
            float:left;
        }
        .iconimg{
            float: left;
            margin-top: 2px;
            width: 30px;
            display: inline-block;
            vertical-align: middle;
        }
        .btn{
            display: inline-block;
            overflow: visible;
            vertical-align: middle;
            text-align: center;
            border-radius: 3px;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-width: 1px;
            border-style: solid;
            cursor: pointer;
            background-color: #44b549;
            background-image: -moz-linear-gradient(top,#44b549 0,#44b549 100%);
            background-image: -webkit-gradient(linear,0 0,0 100%,from(#44b549),to(#44b549));
            background-image: -webkit-linear-gradient(top,#44b549 0,#44b549 100%);
            background-image: -o-linear-gradient(top,#44b549 0,#44b549 100%);
            background-image: linear-gradient(to bottom,#44b549 0,#44b549 100%);
            border-color: #44b549;
            color: #fff;
            height: 33px;
            line-height: 33px;
            width: 120px;
            padding-left: 0;
            padding-right: 0;
        }
        
        .tip{
            font-weight:normal;
            font-size:14px;
            color: #8a8a8a;
            padding: 20px;
        }
        .tip h3{
            font-size: 16px;
            font-weight:normal;
        }
        .tip p{
            padding: 5px 0;
            line-height: 20px;
        }
    </style>
    <div class="container">
        <div id="js_plugins_loading" class="loading" style="display: none;">
            加载中    </div>
        <div id="js_plugins" style="visibility: visible;">
            <div class="tab js_plugin" id="namespace_1" data-pid="2">
                
                <div class="tab_bd">{:C('RECORD_IMAGE')}
                    <if condition="C('RECORD_IMAGE')">
                        <img class="img noShow" src="{:C('RECORD_IMAGE')}" />
                    </if>
                    <div class="article_list article_list_0">
                        <form actin="" method="post">
                            
                            <div class="list_item js_post" href="{:U('Article/detail',['id'=>$info['id'],'cate'=>$info['category_id']])}" title="{$info.title}">
                                <div class="cont">
                                    <!--<i>*</i>-->
                                    <div class="img-container">
                                        <!--<img id="up-btn" class="addimg noShow" type="file" multiple="true" src="__IMG__/addphoto.png"/>-->
                                        <div id="file_upload" ></div>
                                    </div>
                                    <div id="queue" style="display: none;"></div>
                                    <input type="hidden" name="images" value=""/>
                                    <label class="tag2">最多上传5张图片,推荐以截屏图片上传</label>
                                </div>
                            </div>
                            
                            <div class="list_item js_post" href="{:U('Article/detail',['id'=>$info['id'],'cate'=>$info['category_id']])}" title="{$info.title}">
                                <div class="cont">
                                    <i>*</i>
                                    <textarea name="content" placeholder="问题情况说明"></textarea>
                                </div>
                            </div>
                            
                            <div class="list_item js_post" href="{:U('Article/detail',['id'=>$info['id'],'cate'=>$info['category_id']])}" title="{$info.title}">
                                <div class="cont">
                                    <i>*</i>
                                    <img class="iconimg noShow" src="__IMG__/telephone.png"/>
                                    <div class="group">
                                        <label class="tag1">联系电话</label>
                                        <input type="text" name="mobile" />
                                    </div>
                                    <label class="tag2">联系电话将严格保密，仅用于满意度回访</label>
                                </div>
                            </div>
    
                            <div class="list_item js_post" href="{:U('Article/detail',['id'=>$info['id'],'cate'=>$info['category_id']])}" title="{$info.title}">
                                <div class="cont">
                                    <!--<i>*</i>-->
                                    <img class="iconimg noShow" src="__IMG__/location.png"/>
                                    <div class="group">
                                        <label class="tag1">地理位置信息</label>
                                        <input type="text" name="location" />
                                    </div>
                                    <label class="tag2">提供详细的地址将有助于我们更快地核实、处理案件</label>
                                </div>
                            </div>
                            
                            <input type="hidden" name="category_id" value="33"/>
    
                            <div class="list_item js_post" href="{:U('Article/detail',['id'=>$info['id'],'cate'=>$info['category_id']])}" title="{$info.title}">
                                <div class="cont">
                                    <i>*</i>
                                    <img class="iconimg noShow" src="__IMG__/nickname.png"/>
                                    <div class="group">
                                        <label class="tag1">您的称呼</label>
                                        <input type="text" name="chenghu" />
                                    </div>
                                </div>
                            </div>
    
                            <div class="list_item js_post" href="{:U('Article/detail',['id'=>$info['id'],'cate'=>$info['category_id']])}" title="{$info.title}">
                                <div class="cont">
                                    <button type="submit" class="btn">提交</button>
                                </div>
                            </div>
                            
                        </form>
                    </div>
                    
                    <div class="tip" style="">
                        <h3>温馨提示：</h3>
                        <p>
                            <!--<span>2.</span>-->
                            为清晰地反映问题详情，最好能拍摄两张以上照片，谢谢合作。
                        </p>
                    </div>
                
                </div>
            </div>
            <include file="bottom"/>
        
        </div>
    </div>
    <script src="__STATIC__/uploadifive/jquery.uploadifive.min.js"></script>
    <script>
        $(function() {

            // 提交时检查表单内容
            $("form").submit(function(){
                var $images = $("input[name='images']"), $content = $("textarea[name='content']"), $content_string = $content.val(), $mobile = $("input[name='mobile']"), $mobile_string = $mobile.val(), $location = $("input[name='location']"),
                $question = $("select[name='question_id']"), $chenghu  = $("input[name='chenghu']"),
                    $preg_mobile = /^[0-9]{8,12}$/g;


                // 图片
//                if ( !$images.val() ) {
//                    alert('请上传图片');
//                    return false;
//                }
                
                // 问题情况说明
                if ( !($content_string.length >=5) ) {
                    alert('"问题说明"需大于5字符');
                    return false;
                }
                
                // 联系电话
                if ( ! $preg_mobile.test($mobile_string) ) {
                    alert('联系电话不正确');
                    return false;
                }
                
                // 位置信息
//                if ( !$location.val() ){
//                    alert('位置信息不正确');
//                    return false;
//                }


                // 称呼
                if ( !$chenghu.val() ){
                    console.log($chenghu.val());
                    alert('称呼不正确');
                    return false;
                }
                
            });
            
            var $image_number = {:C('IMAGES_NUMBER')};
            $callback = function($file,$res){
                // 声明变量
                var $data = $.parseJSON($res), $container = $(".img-container"), $img;
                
                // 判断是否上传成功
                if ( $data.status == 1 && $data.id > 0 ) {
                    
                    // 检查图片(它会检查是否添加图片，并更新表单值)
                    console.log('上传图片');
                    // 添加表单并上传图片
                    check_img($data.id)
                } else {
                    alert('图片上传失败 '+ $data.info);
                }
            };
            
            // 添加元素
            console.log('初始化时检查图片');
            check_img();
            
            // 上传按钮
            $("#up-btn").on('click',function(){
                // 检查数量
                console.log('上传前检查图片');
                if ( check_img() ) {
//                    $("input[type='file']").trigger('click');
                } else {
                    return false;
                }
            });
            
            // 删除图片
            $("body").on('click','.up-img',function(){
                if ( confirm('要删除此图片吗？') ) {
                    var $this = $(this), $id = $this.data('id');
                    console.log('删除图片');
                    check_img($id,true);
                }
            });

            /**
             * 检查是否已经存在图片id，存在返回1，不存在返回0
             * 若不存在，则增加图片id到表单
             * 此函数内重复语句较多，有待优化
             * @param $id
             * @returns {number}
             */
            function check_img($id, $delete){
                // 声明变量
                var $i, $res = 0, $container = $(".img-container"), $img, $imgs = $(".img-container>.up-img") ,
                    $input = $("input[name='images']"), $ids_string = $input.val(),$ids_array = [], $ids_array_new = [], $ids_string_new, $path;
                
                // id>0则是对当前图片的处理
                if ( $id > 0 ) {
                    // $delete=true：删除， $delete!=true:上传
                    if ( true == $delete ) {
                        // 移除元素
                        $img = $("img.up-img[data-id='"+$id+"']");
                        $img.remove();
                        console.log($img);
                        // 移出表单

                        // 去掉首尾空格
                        $ids_string = $.trim($ids_string);

                        // 过滤多余逗号
                        $ids_string = $ids_string.replace(/^,+/,'').replace(/,+$/,'').replace(/,,/g,',');

                        // 获取id数组
                        $ids_array = $ids_string.split(',');

                        // 去除空元素
                        for( $i = 0; $i < ($ids_array.length); $i ++ ){
                            if ( $ids_array[$i] >0 && $ids_array[$i] != $id ){
                                $ids_array_new.push($ids_array[$i]);
                            }
                        }
                        
                        // 数组合并
                        $ids_string_new = $ids_array_new.join(',');

                        // 表单赋值
                        $input.val($ids_string_new);
                        console.log($input.val());
                        
                    } else {
                        // 判断数量
                        if ( !check_img() ) {
                            console.log('已经达到上限');
                            return false;
                        } else {
                            console.log('未达到上限');
                        }
                        
                        // 1:有相同id的图片；0:无相同id的图片
                        $imgs.each(function($i){
                            if ( parseInt($($imgs[$i]).data('id')) == parseInt($id) ){
                                $res |= 1;
                            }
                        });

                        // 当可以添加此图片时
                        if ( 0 == $res ) {
                            // 去掉首尾空格
                            $ids_string = $.trim($ids_string);

                            // 过滤多余逗号
                            $ids_string = $ids_string.replace(/^,+/,'').replace(/,+$/,'').replace(/,,/g,',');

                            // 获取id数组
                            $ids_array = $ids_string.split(',');

                            // 先不考虑元素重复，直接追加
                            $ids_array.push($id);

                            // 数组字典排序
                            $ids_array.sort();

                            // 相邻去重
                            for( $i = 0; $i < ($ids_array.length); $i ++ ){
                                if ( $ids_array[$i] != $ids_array[$i+1] && $ids_array[$i] != ''){
                                    $ids_array_new.push($ids_array[$i]);
                                }
                            }

                            // 数组合并
                            $ids_string_new = $ids_array_new.join(',');

                            // 表单赋值
                            $input.val($ids_string_new);

                            // 添加图片
                            check_img();
                        }
                        return $res;
                    }
                } else {
                    // id不大于0则检查图片数量

                    // 去掉首尾空格
                    $ids_string = $.trim($ids_string);

                    // 过滤多余逗号
                    $ids_string = $ids_string.replace(/^,+/,'').replace(/,+$/,'').replace(/,,/g,',');

                    // 获取id数组
                    $ids_array = $ids_string.split(',');

                    // 去除空元素
                    for( $i = 0; $i < ($ids_array.length); $i ++ ){
                        if ( $ids_array[$i] >0 ){
                            $ids_array_new.push($ids_array[$i]);
                        }
                    }
                    
                    // 检查是否有图片元素，没有则创建
                    for( $i = 0; $i < ($ids_array_new.length); $i ++ ){
                        
                        // 创建图片元素
                        $img = $("img.up-img[data-id='"+$ids_array_new[$i]+"']");
                        
                        if ( $ids_array_new[$i] != $img.data('id') ){
                            // 获取图片路径
                            $path = "index.php?s=/File/getPicture/id/"+$ids_array_new[$i];
                            // 缩略图元素
                            $img = $("<img class='up-img noShow'data-id='"+$ids_array_new[$i]+"' src='"+$path+"'/>");

                            // 增加图片
                            $container.prepend($img);
                        }
                    }

                    // 检查数量
                    if ( $ids_array_new.length >= $image_number ) {
                        alert('图片最多上传'+$image_number+'张,当前已上传'+$ids_array_new.length+'张');
                        return false;
                    } else {
                        return true;
                    }
                }
            }
            
            $('#file_upload').uploadifive({
                'buttonClass'   : 'up-input',
                'buttonText'       :'',
                'fileType'      :   'image/*',
                'multi'             : false,
                'auto'             : true,
//                'checkScript'      : 'check-exists.php',
                'removeCompleted'  : true,
                'formData'         : {
                    'timestamp' : '{:time()}',
                    'token'     : '{:md5("unique_salt" . time())}'
                },
                'queueID'          : 'queue',
                'overrideEvents':['onProgress'],
                'uploadScript'     : '{:U("File/uploadPicture",array("session_id"=>session_id()))}',
                'onUploadComplete' : $callback
            });
        });
    </script>

</block>

